<template>
  <div class="data-collect-dialog-page">
    <el-dialog
      :model-value="props.dialogVisible"
      title="采集数据"
      width="1000px"
      :close-on-click-modal="false"
      :before-close="handleClose">
      <el-row :gutter="16">
        <el-col class="info-item" :span="8" v-for="(item, index) in infoData" :key="index">
          <span class="label">{{item.label}}:</span>
          <span class="value">11</span>
        </el-col>
      </el-row>

      <div class="search-block">
        <el-form ref="searchParamsRef" :model="searchParams" @submit.prevent="search">
          <el-row :gutter="16">
            <!-- <el-col :span="8">
              <el-form-item label="用户：" prop="name">
                <span>{{searchParams.name}}</span>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="阶段：" prop="range">
                <el-select v-model="searchParams.range" clearable placeholder="请选择阶段" style="width: 100%;">
                  <el-option
                    v-for="item in rangeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
                <el-button @click="exportData">导出数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="data-block">
        <el-table :data="tableData" class="nr-table">
          <el-table-column label="日期" prop="name"></el-table-column>
          <el-table-column label="时间" prop="id"></el-table-column>
          <el-table-column label="用户" prop="rtsp"></el-table-column>
          <el-table-column label="状态" prop="rtsp"></el-table-column>
          <el-table-column label="心率" prop="rtsp"></el-table-column>
          <el-table-column label="呼吸" prop="rtsp"></el-table-column>
        </el-table>
        <el-pagination
          class="nr-page"
          v-model:current-page="searchParams.currentPage"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, prev, pager, next, sizes, jumper"
          :total="searchParams.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="DataCollectDialog">
import { ref, reactive, watch, ComponentInternalInstance, getCurrentInstance, onMounted, nextTick } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'

const { proxy } = getCurrentInstance() as ComponentInternalInstance

const emit = defineEmits(['update:dialogVisible'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  formData: {
    type: Object,
    default: {}
  }
})

const infoData = ref<any>([
  { label: '设备名称', prop: '' },
  { label: '设备ID', prop: '' },
  { label: '日期', prop: '' },
  { label: '用户', prop: '' }
])
const searchParamsRef = ref<FormInstance>()
const searchParams = reactive({
  // name: '用户A',
  range: '',
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const rangeOptions = ref<any>([])
const tableData = ref<any>([
  { id: 1, name: '11' }
])

// 查询
const search = () => {

}

// 重置
const reset = () => {
  searchParamsRef.value?.resetFields()
}

// 分页跳转
const handleCurrentChange = (val: number) => {

}
const handleSizeChange = (val: number) => {

}

// 导出
const exportData = () => {}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 关闭弹窗
const handleClose = () => {
  resetForm(searchParamsRef.value)
  // tableData.value = []
  proxy?.$emit('update:dialogVisible', false)
}
</script>

<style lang="stylus" scoped>
@import '../../style/base.styl'

.data-collect-dialog-page
  .info-item
    margin-bottom 16px
    .label
      width 100px
      display inline-block
      text-align right
      color black
      font-weight bold
    .value
      margin-left 4px
</style>
